<#include '../header.ftl'>
<script src="js/main.js"></script>
<script>
    $(function () {
        //获取浏览器的userAgent,并转化为小写
        var ua = navigator.userAgent.toLowerCase();
        var isIos = (ua.indexOf('iphone') !== -1) || (ua.indexOf('ipad') !== -1);
        if (isIos) {
            $("input:file").removeAttr("capture");
        }
    })
</script>

<!--[if lt IE 9]>
<div class="alert alert-warning alert-dismissible fade show m-0 rounded-0" role="alert">
  You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<![endif]-->

<!-- Header -->
<header class="navbar navbar-light navbar-expand-md">

</header>

<!-- Content -->
<div class="container">
    <#-- 上半部分显示开始 -->
    <div class="row">
        <div class="col-md-9">
            <!-- 中间切割画布开始 -->
            <div class="img-container">
                <img id="image" src="/" alt="请先点击下方上传按钮上传图片~">
            </div>
            <!-- 中间切割画布结束 -->
        </div>
        <div class="col-md-3">
            <!-- 右上角预览窗开始 -->
            <div class="docs-preview clearfix">
                <div class="img-preview preview-lg"></div>
                <div class="img-preview preview-md"></div>
                <div class="img-preview preview-sm"></div>
                <div class="img-preview preview-xs"></div>
            </div>
            <!-- 右上角预览窗结束 -->

            <!-- 右侧当前图像数据显示块开始 -->
            <div class="docs-data">
                <div class="input-group input-group-sm">
                    <span class="input-group-prepend">
                      <label class="input-group-text" for="dataX">X坐标</label>
                    </span>
                    <input type="text" class="form-control" id="dataX" placeholder="x" disabled>
                    <span class="input-group-append">
                      <span class="input-group-text">px</span>
                    </span>
                </div>
                <div class="input-group input-group-sm">
                    <span class="input-group-prepend">
                      <label class="input-group-text" for="dataY">Y坐标</label>
                    </span>
                    <input type="text" class="form-control" id="dataY" placeholder="y" disabled>
                    <span class="input-group-append">
                      <span class="input-group-text">px</span>
                    </span>
                </div>
                <div class="input-group input-group-sm">
                    <span class="input-group-prepend">
                      <label class="input-group-text" for="dataWidth">宽度</label>
                    </span>
                    <input type="text" class="form-control" id="dataWidth" placeholder="width" disabled>
                    <span class="input-group-append">
                      <span class="input-group-text">px</span>
                    </span>
                </div>
                <div class="input-group input-group-sm">
                    <span class="input-group-prepend">
                      <label class="input-group-text" for="dataHeight">高度</label>
                    </span>
                    <input type="text" class="form-control" id="dataHeight" placeholder="height" disabled>
                    <span class="input-group-append">
                      <span class="input-group-text">px</span>
                    </span>
                </div>
                <div class="input-group input-group-sm">
                    <span class="input-group-prepend">
                      <label class="input-group-text" for="dataRotate">旋转度数</label>
                    </span>
                    <input type="text" class="form-control" id="dataRotate" placeholder="rotate" disabled>
                    <span class="input-group-append">
                      <span class="input-group-text">deg</span>
                    </span>
                </div>
                <div class="input-group input-group-sm">
                    <span class="input-group-prepend">
                      <label class="input-group-text" for="dataScaleX">ScaleX</label>
                    </span>
                    <input type="text" class="form-control" id="dataScaleX" placeholder="scaleX" disabled>
                </div>
                <div class="input-group input-group-sm">
                    <span class="input-group-prepend">
                      <label class="input-group-text" for="dataScaleY">ScaleY</label>
                    </span>
                    <input type="text" class="form-control" id="dataScaleY" placeholder="scaleY" disabled>
                </div>
            </div>
            <!-- 右侧当前图像数据显示块结束 -->
        </div>
    </div>
    <#-- 上半部分显示结束 -->
    <#-- 下半部分显示开始 -->
    <div class="row">
        <div class="col-md-9 docs-buttons">
            <!-- <h3>Toolbar:</h3> -->
            <div class="btn-group">
                <button type="button" class="btn btn-primary" data-method="setDragMode" data-option="move" title="Move">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="移动模式">
                      <span class="fa fa-arrows"></span>
                    </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="setDragMode" data-option="crop" title="Crop">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="画剪切框模式">
                      <span class="fa fa-crop"></span>
                    </span>
                </button>
            </div>

            <div class="btn-group">
                <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="放大0.1倍">
              <span class="fa fa-search-plus"></span>
            </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="缩小0.1倍">
              <span class="fa fa-search-minus"></span>
            </span>
                </button>
            </div>

            <div class="btn-group">
                <button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0" title="Move Left">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="向左移动">
                      <span class="fa fa-arrow-left"></span>
                    </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0" title="Move Right">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="向右移动">
                      <span class="fa fa-arrow-right"></span>
                    </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10" title="Move Up">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="向上移动">
                      <span class="fa fa-arrow-up"></span>
                    </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10" title="Move Down">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="向下移动">
                      <span class="fa fa-arrow-down"></span>
                    </span>
                </button>
            </div>

            <div class="btn-group">
                <button type="button" class="btn btn-primary" data-method="rotate" data-option="-45" title="Rotate Left">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="逆时针转45°">
                      <span class="fa fa-rotate-left"></span>
                    </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="rotate" data-option="45" title="Rotate Right">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="逆时针转45°">
                      <span class="fa fa-rotate-right"></span>
                    </span>
                </button>
            </div>

            <div class="btn-group">
                <button type="button" class="btn btn-primary" data-method="scaleX" data-option="-1" title="Flip Horizontal">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="水平镜像">
                      <span class="fa fa-arrows-h"></span>
                    </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="scaleY" data-option="-1" title="Flip Vertical">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="垂直镜像">
                      <span class="fa fa-arrows-v"></span>
                    </span>
                </button>
            </div>

            <div class="btn-group">
                <button type="button" class="btn btn-primary" data-method="disable" title="Disable">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="锁定">
                      <span class="fa fa-lock"></span>
                    </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="enable" title="Enable">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="解锁">
                      <span class="fa fa-unlock"></span>
                    </span>
                </button>
            </div>

            <div class="btn-group">
                <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
                    <input type="file" class="sr-only" id="inputImage" name="file" accept="image/*" capture="camera">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="上传">
                      <span class="fa fa-upload"></span>
                    </span>
                </label>
            </div>

            <div class="btn-group btn-group-crop">
                <button type="button" id="check" class="btn btn-success" data-method="getCroppedCanvas" data-option="{ &quot;maxWidth&quot;: 4096, &quot;maxHeight&quot;: 4096 }">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="提交">
                      提交
                    </span>
                </button>
            </div>

            <!-- Show the cropped image in modal -->
<#--            <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">-->
<#--                <div class="modal-dialog">-->
<#--                    <div class="modal-content">-->
<#--                        <div class="modal-header">-->
<#--                            <h5 class="modal-title" id="getCroppedCanvasTitle">确认当前的截图</h5>-->
<#--                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">-->
<#--                                <span aria-hidden="true">&times;</span>-->
<#--                            </button>-->
<#--                        </div>-->
<#--                        <div class="modal-body"></div>-->
<#--                        <div class="modal-footer">-->
<#--                            <button type="button" class="btn btn-primary" id="download" >确认</button>-->
<#--                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>-->
<#--                        </div>-->
<#--                    </div>-->
<#--                </div>-->
<#--            </div><!-- /.modal &ndash;&gt;-->

        </div>
    </div>
</div>


</body>
</html>